<template>
  <div class='container'>
    <el-card >
      <QuestionsFiltrate/>
       <!-- 数量区域 -->
       <el-alert :title="`数据一共${title}条`" type="info" show-icon :closable="false">
      </el-alert>
      <!-- 表格区域 -->
      <el-table :data="tableList"  >
      <el-table-column prop="number" label="实体编号" width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" min-width="105">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" min-width="103" >
      </el-table-column>
      <el-table-column label="题型" min-width="103">
        <template #default="{row}">
        {{ trunList(row,'questionType')}}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="270">
         <template #default="{row}">
        <span v-html="row.question"></span>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="170">
        <template #default="{row}">
        {{ trunList(row,'addDate')}}
        </template>
      </el-table-column>
      <el-table-column label="难度" min-width="103" align="left">
        <template #default="{row}">
        {{ trunList(row,'difficulty')}}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" min-width="103" align="center">
      </el-table-column>
      <el-table-column label="操作" width="200"  align="left" >
         <template #default="{row}">
        <el-button type="primary" icon="el-icon-view" circle plain @click="lookVisible(row.id)" ></el-button>
         <el-button type="success" icon="el-icon-edit" circle plain @click="$router.push(`/questions/new?id=${row.id}`)"></el-button>
         <el-button type="danger" icon="el-icon-delete" circle plain @click="DelQuestion(row.id)"></el-button>
         <el-button type="warning" icon="el-icon-check" circle plain @click="choiceAdd(row.id)"></el-button>
      </template>
      </el-table-column>
      </el-table>
      <!-- 分页区域 -->
         <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="fromData.page"
          :page-sizes="[2,3,4,5]"
          :page-size="fromData.pagesize"
          layout="total,  prev, pager, next, sizes, jumper"
          :total="title">
        </el-pagination>
    </el-card>
    <QuestionsPiece  ref="preview" />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import QuestionsFiltrate from '../components/questions-filtrate.vue'
import QuestionsPiece from '../components/questions-piece.vue'
import { list as getTableDataAPI, remove as DelquestionAPI, choiceAdd as choiceAddAPI } from '@/api/hmmm/questions'
import { difficulty as getDifficulty, questionType as getQuestionType } from '@/api/hmmm/constants'
export default {
  components: {
    QuestionsFiltrate,
    QuestionsPiece
  },
  data () {
    return {
      tableList: [], // 渲染列表的数据
      // 本组件的表单数据
      fromData: {
        page: 1,
        pagesize: 5
      },
      // 接口提交表单数据
      formSubmit: {},
      title: 0,
      pages: 0,
      dialogVisible: false,
      chkState: ''// 没用，防止子传父报错
    }
  },
  methods: {
    /**
     * 获取表格列表
     */
    async getTableData (data) {
      this.formSubmit = { ...this.fromData, ...data }
      const { data: res } = await getTableDataAPI(this.formSubmit)
      this.title = res.counts
      this.tableList = res.items
      this.pages = res.pages
    },
    /**
     * 改变条数触发
     */
    handleSizeChange (val) {
      this.fromData.pagesize = val
      this.getTableData()
    },
    /**
     * 改变页数触发
     */
    handleCurrentChange (val) {
      this.fromData.page = val
      this.getTableData()
    },
    /**
     * 显示弹框
     */
    lookVisible (id) {
      this.$refs.preview.dialogVisible = true
      this.$refs.preview.getDetail(id)
    },
    /**
     * 转换列表内容
     */
    trunList (data, val) {
      if (val === 'questionType') {
        const res = getQuestionType.find(item => item.value === +data.questionType)
        return res.label
      } else if (val === 'difficulty') {
        const res = getDifficulty.find(item => item.value === +data.questionType)
        return res.label
      } else if (val === 'addDate') {
        const date = dayjs(data.addDate).format('YYYY-MM-DD')
        return date
      }
    },
    /**
     * 删除题操作
     */
    DelQuestion (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示').then(async () => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        await DelquestionAPI({ id: id })
        this.getTableData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
     * 加入精选题库
     */
    async choiceAdd (id) {
      this.$confirm('此操作将题目加入精选, 是否继续?', '提示').then(async () => {
        this.$message({
          type: 'success',
          message: '加入成功!'
        })
        await choiceAddAPI({ id: id, choiceState: 1 })
        this.getTableData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '加入失败'
        })
      })
    }
  },

  created () {
    this.getTableData()
  }
}
</script>

<style scoped lang='scss'>
.container{
  padding: 15px 10px ;
  ::v-deep{
    .el-pagination{
     text-align: right;
     .el-pagination__total{
      display: none;
     }
    }
  }
}
</style>
